<template>
    <el-collapse style="width: 97%">
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    普通组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script name="CommonIndex" setup lang="ts">
import {deepCopy} from "@/utils/ywuCommon";
import {ref} from "vue";

let list = ref([
    {
        name: "普通按钮", title: "按钮编辑", component: "ButtonComponent", drawerComponent: "ButtonDrawer", sourceId: 1,
        propJson: {
            editFlag: true,
            type: "default",
            buttonName: "默认",
            plain: false,
            round: false,
            size: "default",
            iconBefore: "",
            iconAfter: "",
            iconOnly: "",
            circle: false,
            clickBehavior: "NONE",
            bindVariableList: [],
            apiPath: "",
            apiType: "MSOA",
            apiMethod: "GET",
            apiParamList: [],
            apiResponseList: [],
            apiResponseJsonPath: "",
            spanStyleLineHeight: "",
            spanStyleFontSize: "",
            spanStyleAlignCenter: false,
            spanStyleJustifyCenter: false,
            spanStyleFontColor: "",
            spanStyleFontFamily: "",
            isLoading: false,
            clickAction: [{isAsyncAction: false}],
            isCustomColor: false,
            customColor: "",
            isAddBadge: false,
            badgeBindVariable: "",
            badgeMaxNum: 100,
            badgeIsBot: false,
            badgeType: "primary",
            isAddMessage: false, // 是否添加事件结束弹框
            badgeValue: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
        }
    },
    {
        name: "文本", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 2,
        propJson: {
            editFlag: true,
            type: "custom",
            customInfo: "span字体",
            variableName: "",
            apiPath: "",
            apiType: "MSOA",
            apiMethod: "GET",
            apiParamList: [],
            apiResponseJsonPath: "",
            spanStyleLineHeight: "",
            spanStyleFontSize: "",
            spanStyleAlignCenter: false,
            spanStyleJustifyCenter: false,
            spanStyleFontColor: "",
            spanStyleFontFamily: "",
            isForEach: false,
            forEachParam: [],
            isBlock: false,
            actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isClickCopy: false, // 是否开启点击复制
            isClickAction: false, // 是否添加点击事件
            clickActionType: "routeTo", // 点击事件类型 routeTo - 触发跳转路由   action - 触发相关事件
            clickActionInfo: { // 点击事件配置
                actionList: [],
                routeToInfo: {}
            },
            isBold: false,
        }
    },
    {
        name: "表格", title: "表格编辑", component: "TableComponent", drawerComponent: "TableDrawer", sourceId: 4,
        propJson: {
            editFlag: true,
            tableDataType: "custom",
            tableDataCustomType: "Array",
            tableDataCustomInfo: "[{\"id\": \"001\", \"name\": \"zhangsan\",\"age\": 20},{\"id\": \"002\", \"name\": \"lisi\",\"age\": 22},{\"id\": \"003\", \"name\": \"wangwu\",\"age\": 23}]",
            tableDataParam: "",
            tableFieldList: [{variableLabel: "ID", showType: "variable", customHTML: "", variableField: "id", isAlignCenter: "left"},{variableLabel: "姓名", showType: "variable", customHTML: "", variableField: "name", isAlignCenter: "left"}],
            tableDataVariable: "",
            isBorder: false,
            isStripe: false,
            isOverFlowTip: false,
            isMaxHeight: false,
            maxHeight: "",
            isAddOperate: false,
            operateHtml: "",
            operateName: "",
            isSelection: false,
            selectVarParamName: "",
            operationWidth: 300,
            isTreeView: false, // 是否启用树形展示
            rowKey: "id", // 树形展示时需要rowKey
            childrenName: "children", // 树形信息字段名
            isShowAllChildren: false, // 是否展示所有子信息
            isDynamicColumns: false, // 是否启用动态列
            dynamicColumnsInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    },
    {
        name: "分页",
        title: "分页编辑",
        component: "PaginationComponent",
        drawerComponent: "PaginationDrawer",
        sourceId: 5,
        propJson: {
            editFlag: true,
            currentPageType: "custom",
            currentPageCustom: "1",
            currentPageVariable: "",
            pageSizeType: "custom",
            pageSizeCustom: "1",
            pageSizeVariable: "",
            totalType: "custom",
            totalCustom: "10",
            totalVariable: "",
            layOutPosition: "left",
            paginationSizeType: "default",
            isBackground: true,
            pageSizeListType: "custom",
            pageSizeList: "[10, 20, 30, 50, 100, 200, 400]",
            paginationLayoutPrevFlag: true,
            paginationLayoutPrevNum: 1,
            paginationLayoutPagerFlag: true,
            paginationLayoutPagerNum: 2,
            paginationLayoutNextFlag: true,
            paginationLayoutNextNum: 3,
            paginationLayoutJumperFlag: true,
            paginationLayoutJumperNum: 4,
            paginationLayoutSizesFlag: true,
            paginationLayoutSizesNum: 5,
            paginationLayoutTotalFlag: true,
            paginationLayoutTotalNum: 6,
            pageStartIndex: 1,
            apiType: "MSOA",
            apiPath: "",
            apiMethod: "GET",
            pageChangeInnerRequestVariable: [{
                name: "内置参数 currentPage",
                variableName: "",
                type: "custom",
                variableParamName: ""
            }, {name: "内置参数 pageSize", variableName: "", type: "custom", variableParamName: ""}],
            pageChangeActionRequestList: [],
            pageChangeActionResponseList: [],
            paginationActionList: [{isAsyncAction: false}]
        }
    },
    {
        name: "进度条", title: "进度条编辑", component: "PercentageComponent", drawerComponent: "PercentageDrawer", sourceId: 6,
        propJson: {
            editFlag: true,
            actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}, // 百分比值
            type: "line", // 进度条类型 line - 条状  circle - 圆形
            strokeWidth: 10, // 进度条的宽度 - 粗度
            isTextInside: false, // 展示文字是否在进度条内部 - 只在type为line下生效
            isShowText: true, // 是否展示进度条文字内容
            isStriped: false, // 是否添加条纹
            stripedFlow: false, // 是否进行条纹滚动
            width: 126, // type为circle时。设置宽度
            isIndeterminate: false, // 是否进行动画滚动
            duration: 20, // 动画流动速度
        }
    },
    {
        name: "标签", title: "标签编辑", component: "TagComponent", drawerComponent: "TagDrawer", sourceId: 7,
        propJson: {
            editFlag: true,
            type: "primary",
            tagContentInfo: {optionValueType: "custom", optionsCustom: "描述", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isClosable: false,
            size: "default",
            effect: "plain",
            isRound: false
        }
    },
    {
        name: "消息提示", title: "消息提示编辑", component: "AlertMessageComponent", drawerComponent: "AlertMessageDrawer", sourceId: 8,
        propJson: {
            editFlag: true,
            titleActionInfo: {optionValueType: "custom", optionsCustom: "标题", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            descriptionActionInfo: {optionValueType: "custom", optionsCustom: "描述", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            type: "success", // 提示类型  success/warning/info/error
            isClosable: false, // 是否支持关闭
            isCenter: false, // 文字是否居中
            isShowIcon: false, // 是否展示图标
            effect: "dark", // 主题颜色 dark - 深色  light - 浅色
        }
    },
    {
        name: "标签页", title: "标签页编辑", component: "TabsComponent", drawerComponent: "TabsDrawer", sourceId: 9,
        propJson: {
            editFlag: true,
            isBackground: false,
            backGroundColor: "#fff",
            isDynamic: false, // 是否为动态标签列表
            dynamicLabelInfo: {
                optionValueType: "custom", optionsCustom: "[]", optionsCustomValueType: "Array", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []
            },
            dynamicComponentList: [
                {
                    name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                    propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                    }
                }
            ],
            tabsInfoList: [
                {
                    labelInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                        apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                    labelContentComponentList: [
                        {
                            name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                            propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                                actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                            }
                        }
                    ]
                }
            ]
        }
    },
    {
        name: "描述列表", title: "描述列表编辑", component: "DescriptionsComponent", drawerComponent: "DescriptionsDrawer", sourceId: 10,
        propJson: {
            editFlag: true,
            list: [
                {
                    name: "文本", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 2,
                    propJson: {editFlag: true, type: "custom", customInfo: "span字体", variableName: "", apiPath: "", apiType: "MSOA", apiMethod: "GET", responseType: "default", apiParamList: [],
                        apiResponseJsonPath: "", spanStyleLineHeight: "", spanStyleFontSize: "", spanStyleAlignCenter: false, spanStyleJustifyCenter: false,
                        spanStyleFontColor: "", spanStyleFontFamily: "", isForEach: false, forEachParam: [], isBlock: false,
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        isClickCopy: false, isClickAction: false, clickActionType: "routeTo", clickActionInfo: {actionList: [], routeToInfo: {}}
                    }
                }
            ], // 存储描述列表中拖入的组件数据
            border: false, // 是否带有边框
            column: 3, // 一行 Descriptions Item 的数量
            direction: "horizontal", // 排列的方向
            size: "default", // 列表的尺寸
            labelWidth: "80px", // 每一列的标签宽度
            titleInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    },
    {
        name: "分割线", title: "分割线编辑", component: "DividerComponent", drawerComponent: "DividerDrawer", sourceId: 11,
        propJson: {
            editFlag: true,
            type: "solid",
            isAddContent: false,
            position: "left",
            contentInfo: {optionValueType: "custom", optionsCustom: "描述", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
        }
    },
    {
        name: "树形结构", title: "树形结构编辑", component: "TreeComponent", drawerComponent: "TreeDrawer", sourceId: 12,
        propJson: {
            editFlag: true,
            childrenField: "children",
            labelField: "label",
            valueField: "value",
            fontSize: "14px",
            treeHeight: "30px",  // 单个树节点的高度
            isExpandAll: false, // 是否默认全部展开
            contentInfo: {optionValueType: "custom", optionsCustom: "描述", optionsCustomValueType: "String", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isAddCustomAction: false,  // 是否添加自定义节点内容
            slotName: "",       // 插槽名称
            customActionContent: "",   // 自定义节点内容
            isAddClickAction: false, // 是否添加点击事件
            isOnlyChildrenClick: true, // 是否只有叶子节点可以点击
            treeClickAction: [{isAsyncAction: false}],  // 点击事件配置
        }
    }
]);

function cloneDefaultField(e) {
    let copyE = deepCopy(e);
    copyE.ruleInfo = {
        ruleInfoList: []
    }
    return copyE;
}

function onStart(e) {
    e.item._underlying_vm_.id = generateUUID();
}

function randomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

function generateUUID() {
    return (randomNumber() + randomNumber() + "-" + randomNumber() + "-" + randomNumber() +
        "-" + randomNumber() + "-" + randomNumber() + randomNumber() + randomNumber());
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>